<script setup>
import { useUserStore } from '@/stores/counter';
import { ref } from 'vue';

const messages = ref([
    {
        id: 1,
        userId: 1,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%283%29+%281%29.png',
        date: '1.22pm',
        texts: ['对话测试-其他人']
    },
    {
        id: 2,
        userId: 4,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2812%29.png',
        date: '3.16pm',
        texts: ['对话测试-自己']
    },
    {
        id: 3,
        userId: 2,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%284%29+%281%29.png',
        date: '4.30pm',
        texts: ['这是一个测试消息']
    },
    {
        id: 4,
        userId: 3,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%285%29+%281%29.png',
        date: '5.45pm',
        texts: ['另一个测试消息', '多行消息测试']
    },
    {
        id: 5,
        userId: 4,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%286%29+%281%29.png',
        date: '6.00pm',
        texts: ['对话测试-自己', '第二行消息']
    },
    {
        id: 6,
        userId: 1,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%287%29+%281%29.png',
        date: '6.30pm',
        texts: ['对话测试-其他人', '多行消息测试']
    },
    {
        id: 7,
        userId: 2,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%288%29+%281%29.png',
        date: '7.00pm',
        texts: ['测试消息7']
    },
    {
        id: 8,
        userId: 3,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%289%29+%281%29.png',
        date: '7.30pm',
        texts: ['测试消息8', '多行消息测试']
    },
    {
        id: 9,
        userId: 4,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2810%29+%281%29.png',
        date: '8.00pm',
        texts: ['对话测试-自己', '第二行消息']
    },
    {
        id: 10,
        userId: 1,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2811%29+%281%29.png',
        date: '8.30pm',
        texts: ['对话测试-其他人', '多行消息测试']
    },
    {
        id: 11,
        userId: 2,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2812%29+%281%29.png',
        date: '9.00pm',
        texts: ['测试消息11']
    },
    {
        id: 12,
        userId: 3,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2813%29+%281%29.png',
        date: '9.30pm',
        texts: ['测试消息12', '多行消息测试']
    },
    {
        id: 13,
        userId: 4,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2814%29+%281%29.png',
        date: '10.00pm',
        texts: ['对话测试-自己', '第二行消息']
    },
    {
        id: 14,
        userId: 1,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2815%29+%281%29.png',
        date: '10.30pm',
        texts: ['对话测试-其他人', '多行消息测试']
    },
    {
        id: 15,
        userId: 2,
        profileSrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2816%29+%281%29.png',
        date: '11.00pm',
        texts: ['测试消息15']
    }
]);

const userStore = useUserStore();
const currentUserId = userStore.userId;
</script>

<template>
    <div class="chat-area">
        <div class="chat-area-header">
            <div class="chat-area-title">CodePen Group</div>
            <div class="chat-area-group">
                <img class="chat-area-profile"
                    src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%283%29+%281%29.png" alt="" />
                <img class="chat-area-profile"
                    src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3364143/download+%2812%29.png" alt="" />
                <span>+4</span>
            </div>
        </div>
        <div class="chat-area-main">
            <div class="chat-msg" v-for="msg in messages" :key="msg.id" :class="{ owner: msg.userId === currentUserId }">
                <div class="chat-msg-profile">
                    <img class="chat-msg-img" :src="msg.profileSrc" alt="" />
                    <div class="chat-msg-date">{{ msg.date }}</div>
                </div>
                <div class="chat-msg-content">
                    <div class="chat-msg-text" v-for="text in msg.texts" :key="text">{{ text }}</div>
                </div>
            </div>
        </div>
        <div class="chat-area-footer">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video">
                <path d="M23 7l-7 5 7 5V7z" />
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <circle cx="8.5" cy="8.5" r="1.5" />
                <path d="M21 15l-5-5L5 21" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
                <circle cx="12" cy="12" r="10" />
                <path d="M12 8v8M8 12h8" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip">
                <path
                    d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
            </svg>
            <input type="text" placeholder="Type something here..." />
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
                <circle cx="12" cy="12" r="10" />
                <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up">
                <path
                    d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3" />
            </svg>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.chat-area {
    flex-grow: 1;
}

.chat-area {
    display: flex;
    flex-direction: column;
    overflow: auto;

    &-header {
        display: flex;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background: var(--chat-header-bg);
    }

    &-profile {
        width: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    &-title {
        font-size: 18px;
        font-weight: 600;
    }

    &-main {
        flex-grow: 1;
    }
}

.chat-msg-img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-msg-profile {
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: -20px;
    position: relative;
}

.chat-msg-date {
    position: absolute;
    left: calc(100% + 12px);
    bottom: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--msg-date);
    white-space: nowrap;
}

.chat-msg {
    display: flex;
    padding: 0 20px 45px;

    &-content {
        margin-left: 12px;
        max-width: 70%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    &-text {
        background-color: var(--chat-text-bg);
        padding: 15px;
        border-radius: 20px 20px 20px 0;
        line-height: 1.5;
        font-size: 14px;
        font-weight: 500;

        &+& {
            margin-top: 10px;
        }
    }
}

.chat-msg-text {
    color: var(--chat-text-color);
}

.owner {
    flex-direction: row-reverse;

    .chat-msg-content {
        margin-left: 0;
        margin-right: 12px;
        align-items: flex-end;
    }

    .chat-msg-text {
        background-color: var(--theme-color);
        color: #fff;
        border-radius: 20px 20px 0 20px;
    }

    .chat-msg-date {
        left: auto;
        right: calc(100% + 12px);
    }
}

.chat-msg-text img {
    max-width: 300px;
    width: 100%;
}

.chat-area-footer {
    display: flex;
    border-top: 1px solid var(--border-color);
    width: 100%;
    padding: 10px 20px;
    align-items: center;
    background-color: var(--theme-bg-color);
    position: sticky;
    bottom: 0;
    left: 0;
}

.chat-area-footer svg {
    color: var(--settings-icon-color);
    width: 20px;
    flex-shrink: 0;
    cursor: pointer;

    &:hover {
        color: var(--settings-icon-hover);
    }

    &+svg {
        margin-left: 12px;
    }
}

.chat-area-footer input {
    border: none;
    color: var(--body-color);
    background-color: var(--input-bg);
    padding: 12px;
    border-radius: 6px;
    font-size: 15px;
    margin: 0 12px;
    width: 100%;

    &::placeholder {
        color: var(--input-chat-color);
    }
}
</style>